<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymleaf.org">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .one {
            margin-top: 0px;
            margin-left: 100px;
            height: 50px;
            width: 400px;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 585px; border: 1px solid #eee">

        <el-container>
            <!--左侧导航-->

            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu>
                    <el-submenu :index="dep.id" v-for="dep in departments">
                        <template slot="title">
                            <span @click="selectDepartment(dep.name,dep.id,true)" target="main" width="200px">
                            {{dep.name}}</span>
                        </template>
                        <el-menu-item-group>
                            <!--        <template slot="title">分组一</template>-->
                            <el-menu-item :index="sub.id" v-for="sub in dep.subTDepartment">
                                <!--超链接的target是跳转的目标，设置为iframe的name-->
                                <span @click="selectDepartment(sub.name,sub.id,false)" target="main">{{sub.name}}</span>
                            </el-menu-item>

                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--右侧列表-->
            <el-main style="padding: 0">
                <iframe name="main" style="width: 100%;height:0px;border:0px"></iframe>

                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px"
                         class="demo-dynamic">
                    <div class="one">
                        <el-button id="add" type="primary" v-if="showDialog" icon="el-icon-circle-plus"
                                   @click="dialogFormVisible=true">新增下级部门
                        </el-button>
                        <el-button id="delete" type="warning" icon="el-icon-delete-solid" @click="deleteDepartment">
                            删除该部门
                        </el-button>
                    </div>
                    <el-form-item>
                        <span>部门编号:</span>
                        <el-input v-model="dynamicValidateForm.no" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>部门名称:</span>
                        <el-input v-model="dynamicValidateForm.name" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>部门经理:</span>
                        <el-input v-model="dynamicValidateForm.manager" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>联系电话:</span>
                        <el-input v-model="dynamicValidateForm.phone" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>固定电话:</span>
                        <el-input v-model="dynamicValidateForm.tel" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item
                            prop="email"

                            :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
                    >
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱:</span>
                        <el-input v-model="dynamicValidateForm.email" style="width: 200px"></el-input>
                    </el-form-item>
                    <div v-for=" (post,index) in dynamicValidateForm.post">
                        <el-form-item>
                            <span>部门职位:</span>
                            <el-input v-model="post.name" style="width: 200px"></el-input>
                        </el-form-item>
                        <span v-if="index==0"> <el-button @click="addDomain">新增职位</el-button></span>
                        <span v-else></span>
                        <span v-if="index!=0"><el-button @click.prevent="removeDomain(post)">删除</el-button></span>
                        <span v-else></span>
                    </div>
                    <el-form-item>
                        <span>部门简介:</span>
                        <el-input v-model="dynamicValidateForm.intro" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">提交</el-button>

                        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </el-container>

    <el-dialog title="新增下级部门" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="部门编号" label-width="100px">
                <el-input v-model="form.no" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" label-width="100px">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门经理" label-width="100px">
                <el-input v-model="form.manager" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" label-width="100px">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="固定电话" label-width="100px">
                <el-input v-model="form.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="100px">
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门职位" label-width="100px" v-for=" post in form.post">
                <el-input v-model="post.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门简介" label-width="100px">
                <el-input v-model="form.intro" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDepartment()">确 定</el-button>
        </div>
    </el-dialog>
</div>

<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                departments: [],
                dynamicValidateForm: {},
                dialogFormVisible: false,
                showDialog: true,
                form: {
                    id: "",
                    pid: "",
                    no: "",
                    name: "",
                    manager: "",
                    phone: "",
                    tel: "",
                    email: "",
                    intro: "",
                    cid: "",
                    post: [{
                        name: ""
                    }]
                },

                oneLevel: ""

            }

        },
        mounted() {
            this.loadPage()

        },
        methods: {
            loadPage() {
                axios.get("/department").then(value => {
                    if (value.data.state == 1) {
                        this.departments = value.data.data;
                        console.log(this.departments);
                    }
                })
            },

            deleteDepartment() {
                axios.delete("/deletepartment" + "/" + this.oneLevel).then(value => {
                    if (value.data.state) {
                        this.loadPage()
                        this.dynamicValidateForm = {
                            id: "",
                            pid: "",
                            no: "",
                            name: "",
                            manager: "",
                            phone: "",
                            tel: "",
                            email: "",
                            intro: "",
                            cid: "",
                            post: [{
                                name: ""
                            }]
                        }
                        this.$message("删除成功")

                    }
                })


            },
            addDepartment() {
                console.log(this.oneLevel);
                this.form.pid = this.oneLevel;
                console.log(this.form.pid);
                axios.post("/savedepartment", this.form).then(value => {
                    if (value.data.state == 1) {
                        this.dialogFormVisible = false;
                        this.loadPage()
                        this.$message("提交成功");

                    }
                })
            },
            selectDepartment(name, id, showDialog) {
                this.oneLevel = id;
                this.showDialog = showDialog
                axios.get("/selectDepartment?name=" + name).then(value => {
                    if (value.data.state == 1) {
                        this.dynamicValidateForm = value.data.data;
                    }
                })
            },
            submitForm() {
                axios.put("/department", this.dynamicValidateForm).then(value => {
                    if (value.data.state == 1) {
                        this.$message("提交成功")
                    }
                })

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            removeDomain(item) {
                var id = item.id;
                axios.delete("/deletepost/" + id).then(value => {
                    if (value.data.state == 1) {
                        let index = this.dynamicValidateForm.post.indexOf(item)
                        if (index !== 0) {
                            this.dynamicValidateForm.post.splice(index, 1)
                        }
                    }
                })


            },
            addDomain() {
                this.dynamicValidateForm.post.push({
                    name: ""
                });

            }

        }
    });
</script>
</body>
</html>